<div id="attachmentArea" class="listAttachments-container">
    <header class="listAttachments-header">
        <span class="title">
            <strong class="listAttachments-title-size">{{ model.attachmentsSize() | humanSize }}</strong>
            <span ng-show="model.Attachments.length - model.NumEmbedded > 0" class="listAttachments-title-files">
                <i class="fa fa-paperclip"></i> {{ model.Attachments.length -  model.NumEmbedded }} <span translate translate-n="model.Attachments.length - model.NumEmbedded" translate-plural="files attached" translate-context="Info">file attached</span>
            </span>
            <span ng-if="model.NumEmbedded > 0" class="listAttachments-title-embedded">
                <i class="fa fa-image embedded"></i>
                {{ model.NumEmbedded }}
                <span
                    translate
                    translate-context="Info"
                    translate-n="model.NumEmbedded"
                    translate-plural="embedded images">embedded image</span>
            </span>

            <span ng-if="model.Attachments.length" class="listAttachments-title-download">
                <btn-download-attachments
                    data-model="model"
                    class="listAttachments-btn-downloadAll"></btn-download-attachments>
            </span>
        </span>
    </header>

    <section class="listAttachments-list">
        <attachment-element
            ng-repeat="attachment in model.Attachments track by $id(attachment)"
            data-attachment="attachment"
            data-message="model">
        </attachment-element>
    </section>
</div>
